<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0px;
				padding:0px;
			}
			html,body{
				height:200%;
			}
			#nav{
				width:100%;
				height:80px;
				background-color:#ccc;
				position:absolute;
				line-height:80px;
				top:50px;
			}
			#nav span,#nav a{
				font-size:18px;
				float:left;
				padding:0px 10px;
				margin-left:30px;
				text-decoration: none;
				color:#333;
			}
			#box{
				display:none;
				position:fixed;
				left:300px;
				top:250px;
				border:1px solid #ccc;
			}
			input[type="text"],input[type="password"]{
				float:left;
				width:170px;
				height:20px;
				margin:3px 0;
				border-radius:3px;
			}
			table{
				margin:20px auto 0;
				font-size:14px;
				width:420px;
				height:180px;
			}
			
			#sub,#sub2{
				width:130px;
				line-height:40px;
				color:#fff;
				background-color:#1dd;
				border-radius:5px;
				border:0;
				font-size:23px;
				outline:none;
				margin:5px 0;
			}
			#sub:hover,#sub2:hover{
				background-color:#0bb;
			}
			#top{
				width:100%;
				background:#eee;
				height:43px;
			}
			#top1,#top2{
				font-size:25px;
				font-weight:600;
				float:left;
				background:#fff;
				text-decoration: none;
				padding:5px 20px;
				color:#333;
			}
			#top2{
				background:#eee;
			}
			#tuo{
				width:420px;
				height:40px;
				color:#999;
				line-height:30px;
				background:#ddd;
				padding:0 20px;
			}
			#close{
				float:right;
				font-size:18px;
				text-decoration: none;
				padding:5px 20px;
				color:#333;
			}
			#dl2{
				display:none;
			}
			.yes{
				float:left;
				color:green;
				height:23px;
				margin:5px 0 0 10px;
			}
			.no{
				float:left;
				color:red;
				height:23px;
				margin:5px 0 0 10px;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<span>nav</span>
			<a href="javascript:;" id="plase">请先注册</a>
		</div>
		<div id="box">
			<div id="tuo">拖拽区</div>
			<div id="top">
				<a href="javascript:;" class="to" id="top1">注册</a>
				<a href="javascript:;" class="to" id="top2">登录</a>
				<a href="javascript:;" id="close">关闭</a>
			</div>
			<form action="1.html" onsubmit="return checked();" class="for" id="dl">
				<table  align='center'>
				  <tr>
					<td width="110" align="right">邮箱名：</td>
					<td><label>
					  <input type="text" name="" id="name" /><span></span>
					</label></td>
				  </tr>
				  <tr>
					<td align="right">密码：</td>
					<td><label>
					  <input type="password" name="" id="pwd" /><span></span>
					</label></td>
				  </tr>
				  <tr>
					<td height="36" colspan="2" align="center"><label>
					  <input type="submit" value="注册" id="sub"/>
					</label></td>
				  </tr>
				</table>
			</form>
			<form action="1yes.html" onsubmit="return yz();" class="for" id="dl2">
				<table  align='center'>
				  <tr>
					<td width="110" align="right">邮箱名：</td>
					<td><label>
					  <input type="text" name="" id="name2" /><span></span>
					</label></td>
				  </tr>
				  <tr>
					<td align="right">密码：</td>
					<td><label>
					  <input type="password" name="" id="pwd2" /><span></span>
					</label></td>
				  </tr>
				  <tr>
					<td height="36" colspan="2" align="center"><label>
					  <input type="submit" value="登录" id="sub2"/>
					</label></td>
				  </tr>
				</table>
			</form>
		</div>
		<script>
			function $(id){
				return document.getElementById(id);
			}
			window.onscroll = function(){
			 	var height = 80;
			 	var sTop = document.body.scrollTop || document.documentElement.scrollTop;
			 	if( sTop > height ){
			 		$("nav").style.position = "fixed";
			 		$("nav").style.top = "0";
			 	}else{
			 		$("nav").style.top = 80-sTop+"px";
			 	}
			 }
			$("plase").onclick=function(){
				$("box").style["display"]="block";
			}
			$("close").onclick=function(){
				$("box").style["display"]="none";
			}
			
			/**/
			$("tuo").onmousedown=function(evt){
				var e=evt || event;
				var offx=e.offsetX;
				var offy=e.offsetY;
				document.onmousemove=function(evt){
					var e=evt || event;
					var x=e.clientX-offx;
					var y=e.clientY-offy;
					var maxx=window.innerWidth-$("box").offsetWidth;
					var maxy=window.innerHeight-$("box").offsetHeight;
					if(x<0){
						x=0;
					}else if(x>maxx){
						x=maxx;
					}
					if(y<0){
						y=0;
					}else if(y>maxy){
						y=maxy;
					}
					$("box").style.left=x+"px";
					$("box").style.top=y+"px";
					$("box").style.transition="0s";
				}
			}
			$("tuo").onmouseleave=function(){
				document.onmousemove = null;
			}
			$("tuo").onmouseup=function(){
				document.onmousemove = null;
			}
			/**/
			var aList = document.getElementsByClassName("to"); 
			var conList = document.getElementsByClassName("for");
			for( var i = 0 ; i < aList.length ; i++ ){
				aList[i].onmouseover = function(){
					for(var j = 0 ; j < aList.length ; j++){
						if( this == aList[j] ){
							this.style.background = "#fff";
							conList[j].style.display = "block";
						}else{
							conList[j].style.display = "none";
							aList[j].style.background = "#eee";
						}
					}
				}
			}
			/**/
			
			var sum=0;
			var tname=null;
			$("name").onblur=function(){
				var reg=/^\w+@\w+\.com$/;
				var str=$("name").value;
				if(reg.test(str)){
					$("name").nextElementSibling.innerHTML="正确";
					$("name").nextElementSibling.className="yes";
					tname=true;
				}
				else{
					$("name").nextElementSibling.innerHTML="邮箱格式错误";
					$("name").nextElementSibling.className="no";
					tname=false;
				}
			}
			var tpwd=null;
			$("pwd").onblur=function(){
				var reg=/^\w{6,}$/i;
				var str=$("pwd").value;
				if(reg.test(str)){
					$("pwd").nextElementSibling.innerHTML="正确";
					$("pwd").nextElementSibling.className="yes";
					tpwd=true;
				}
				else{
					$("pwd").nextElementSibling.innerHTML="密码应不少于6位";
					$("pwd").nextElementSibling.className="no";
					tpwd=false;
				}
			}
			function checked(){
				if(tname && tpwd){
					alert("注册成功");
					document.cookie = "name="+$("name").value;
					document.cookie = "pwd="+$("pwd").value;
					return true;
				}else{
					alert("格式错误，检查一下吧");
					return false;
				}
			}
			
			/**/
			function yz(){
				var str = document.cookie;
				var arr = str.split("; ");
				for(var i = 0 ; i < arr.length ; i++){
					var item = arr[i].split("=");
					if( item[0] == "name" ){
						var name = item[1];
					}
					else if( item[0] == "pwd" ){
						var pwd = item[1];
					}
				}
				if($("name2").value==name && $("pwd2").value==pwd){
					return true;
				}else{
					alert("登录失败");
					return false;
				}
			}
		</script>
	</body>
</html>

